
<template>
  <div :xl="6" :lg="7" class="bg-login">
      <router-view/>
      <!-- logo -->
      <el-image
              style="width: 100px; height: 100px"
              :src="require('@/assets/logo.png')"
              class="logo"></el-image>
      <!-- 标题 -->
      <el-row type="flex" class="row-bg row-two" justify="center" >
        
          <el-col :span="3">
              <!-- 标题 -->
              <h3 class="title">个人注册</h3>
             
          </el-col>
          <el-col :span="3">
          <h3 class="title" @click="company()">公司注册</h3>
          </el-col>
      </el-row>
      <!-- form表单 -->
      <el-row type="flex" class="row-bg card" justify="center"  >
          <el-col :sapn="8" class="login-card">
              <!-- loginForm -->
              <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="21%" class="loginForm" >
                  <el-form-item  prop="userName" style="width:380px">
                      <el-input v-model="loginForm.userName" placeholder="Email" class="input-i">
                        <el-button slot="append" icon="el-icon-user-solid"></el-button>
                      </el-input>
                  </el-form-item>
                  <!-- 密码 -->
                  <el-form-item prop="password" style="width:380px">
                      <el-input v-model="loginForm.password" placeholder="password" class="input-i" >
                        <el-button slot="append" class="el-icon-s-goods"></el-button></el-input>
                  </el-form-item>
                  <!-- 第二次密码 -->
                  <el-form-item prop="password" style="width:380px">
                      <el-input v-model="loginForm.password2"  placeholder="Retype password" class="input-i">
                        <el-button slot="append" class="el-icon-s-goods"></el-button></el-input>
                  </el-form-item>
                  <!-- 验证码 -->
                  <el-form-item  prop="imgcode" style="width:380px">
                      <el-input v-model="loginForm.imgcode"   placeholder="验证码" class="input-i">
                        <el-button slot="append" @click="imgcode()">发送验证码</el-button>
                 </el-input>
                  </el-form-item>
                 
                   <!-- 下拉框 -->
                   <el-form-item class="btn-ground " >
                        <el-select v-model="value" placeholder="请选择" style="width:300px" class="input-i">
                          <el-option
                         v-for="item in options"
                           :key="item.value"
                            :label="item.label"
                          :value="item.value">
                            </el-option>
                            </el-select>
                   </el-form-item>
  <!-- 按钮 -->
                  <el-form-item class="btn-ground ">
                    <el-checkbox v-model="checked" class="checktde">I argee to the terms</el-checkbox>
                      <el-button type="primary" class="btn" :disabled="confirm_disabled"  size="medium" @click="submitForm()" >注册</el-button>
                  </el-form-item>

                  <el-form-item class="btn-ground">
                    <el-link :underline="false"  class="checktde" type="primary" @click="reback">I already have a membership</el-link>
                  </el-form-item>
                 
                 

              </el-form>
          </el-col>
      </el-row>
  </div>
</template>

<script>
  export default {
      name: "IndexView",
      data() {
          return {
            value:'',
            // 下拉框
            options: [{
          value: '1',
          label: '无'
        }, {
          value: '2',
          label: 'xx公司'
        },
        {
          value: '3',
          label: '机构'
        },],
            // 记住密码
              checked: true,
              confirm_disabled:false,
              // 表单信息
              loginForm: {
                  // 账户数据
                  userName: '',
                  // 密码数据
                  password: '',
                  password2:'',
                  imgcode:''

              },
              // 表单验证
              rules: {
                  // 设置账户效验规则
                 
                  // 设置密码效验规则
                  password: [
                      {required: true, message: '请输入密码', trigger: 'blur'},
                      {min: 3, max: 15, message: '长度在 6 到 15 个字符的密码', trigger: 'blur'}
                  ],

              },

          };
      },
      methods: {
        reback(){
          this.$router.push('/').catch(() =>{})
        },
        company(){
          this.$router.push('/unitRegister').catch(() =>{})
        },
          // 提交表单
          submitForm() {
           
              this.confirm_disabled=true
              // 判断密码
              if (this.loginForm.password !== this.loginForm.password2) {
                   this.$message({
                    type: "error",
                      message: '2次密码输入不一致！'
                  })
                return
                }

              this.$refs.loginForm.validate((valid) => {
                  if (valid) {
                    console.log(this.loginForm)
                      this.$axios.post(this.$httpUrl+'/login/doRegister',
                          this.loginForm

                      ).then(res=>res.data).then(res=>{
                       

                          if (res.code==200){
                              // sessionStorage.setItem("CurUser",JSON.stringify(res.data.user))
                              // console.log(res.data.menu)
                              // this.$store.commit("setMenu",res.data.menu)
                              // this.centerDialogVisible=false
                              // this.$router.push('/sy').catch(() =>{})
                            

                          }else {
                              this.confirm_disabled=false
                              alert('账户或者密码输入错误');
                              return false;
                          }
                      })

                  }
              });
          },

          // 重置表单
          resetForm(formName) {
              this.$refs[formName].resetFields();
          }
      },
  }
</script>

<style scoped>
  .codeImg {
      /*让验证码图片飘在右边*/
      float: right;
      /*设置一些圆角边框*/
      border-radius: 3px;
      /*设置宽度*/
      width: 26%;
  }
  .row-two{
    position: relative;
    left: -60px;
  }
  .input-i{
    text-align: center;
  }
  .loginForm{
    position: relative;
    right: 30px
  }
  .bg-login {
      height: 900px;
      background-image: url("@/assets/back.webp");
      background-size: 100%;

  }

  .btn-ground {
      text-align: center;
      height: 8px;
  }
  .btn{
    float: right;
    margin-top:15px;
    margin-right: 30px;
  }
  .checktde{
    float: left;
  }

  .logo {
      margin: 0px;
      height: 70px;
      width: 70px;

      float: left;

  }

  .title {
      text-shadow: -3px 3px 1px #5f565e;
      text-align: center;
      margin-top: 60%;
      color: #41b9a6;
      font-size: 40px;
  }

  .login-card {
      background-color: #ffffff;
      opacity: 0.9;
      box-shadow: 0 0 20px #ffffff;
      border-radius: 10px;
      padding: 40px 40px 30px 15px;
      width: auto;
  }
</style>
